<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 1200px;

			}

			#box1 {
				background: url_for('static', filename='images/head_bg.jpg');
				width: 1200px;
			}

			#box1>img {
				margin-left: 40px;
			}
           #box1>ul{
				/**/
				margin-left: 500px;
				
				color: white;
			}
			li{
				width: 119px;
				text-align: center;
				height: 91px;
				 float: left;
				 list-style: none;
			}
			nav .ul.li.a{
				text-decoration: none;
				color: white;
			}
			#box2 {
				/*background-image: url(img/banner.jpg);*/
				text-align: center;
				/*width: 980px;*/
			}

			#box3 {
				background-color: #6dbf2d;
				width: 930px;
				height: 350px;
				padding: 25px;
				margin: 0 auto;
			}
            .p{
				text-align: center;
				
			}
			#aa,
			#ab,
			#ba {
				float: left;
				padding: 2px;
			}

			#ab {
				float: left;
				/*margin-left: 200px;*/
			}

			#ca,
			#cb {
				float: right;
				padding: 2px;
			}

			#bb {
				margin-left: 467px;
			}

			#ab {}

			.A {
				background-color: gainsboro;
				width: 125px;
				height: 169px;
			}

			.B {
				background-color: gainsboro;
				height: 137px;
				width: 125px;
				margin-top: 5px;
			}

			.C {
				background-color: gainsboro;
				height: 117px;
				width: 120px;
			}

			.D {
				background-color: gainsboro;
				height: 188px;
				width: 120px;
				margin-top: 5px;
			}

			.E {
				background-color: gainsboro;
				height: 314px;
				width: 130px;
			}
			.F{
				background-color: #75ba2c;
				width: 350px;
				height: 40px;
				margin:  70px auto 0 110px ;
				color: white;
				font-size: x-large;
			}
			#box4{
				background-color: aliceblue;
				width: 975px;
				height: 350px;
				margin: 0 auto;
				padding: 10px;
			}
			.one,.two,.three,.four{
				float: left;
				margin: 5px;
			}
			li:hover{
				background-image: url_for('static', filename='images/xuanfu.png');
				width: 119px;
				text-align: center;
			}
			.A:hover,.B:hover,.C:hover,.D:hover,.E:hover{
				background-color:lightgreen;
			}
			.one:hover,.two:hover,.three:hover,.four:hover{
				opacity: 0.5;
			}
			.G{
				background-color: #6dbf2d;
				width: 140px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				
				<img src="img/logo.png" alt="" width="178px">
				<nav><ul>
				<li><a href="">首页</a></li>
				<li><a href="">学校介绍</a></li>
				<li><a href="">课程设置</a></li>
				<li><a href="">师资力量</a></li>
				<li><a href="">招生问答</a></li>
				<li><a href="">教学活动</a></li>
                </ul>
				</nav>
				
			</div>
			<div id="box2">
				<img src="{{ url_for('static', filename='images/banner.jpg') }}" alt="" width="980px">
			</div>
			<div id="box3">
				<div id="a">
					<div id="aa">
						<img src="images/pic01.jpg" alt="">
						<br>
						<img src="images/pic02.jpg" alt="">
					</div>
					<div id="ab">
						<p class="A"><br><br><br>大学专区</p>
						<p class="B"><br><br>求职专区</p>
					</div>
				</div>
				<div id="c">
					<div id="cb">
						<p class="E"><br><br><br><br><br><br><br>线上精品课专区</p>
					</div>
					<div id="ca">
						<img src="images/pic05.jpg" alt="">
					</div>
				</div>
				<div id="b">
					<div id="ba">
						<img src="images/pic03.jpg" alt="">
						<br>
						<img src="images/pic04.jpg" alt="">
					</div>
					<div id="bb">
						<p class="C"><br><br>高中专区</p>
						<p class="D"><br><br><br><br>考证专区</p>
					</div>
				</div>
			</div>
			
			<p class="F">热门课程 / Popular courses</p>
			<div id="box4">
				<div class="one">
					<img src="images/match01.jpg" alt=""><br>
					<p>软件工程师课程</p><br>
					<img src="images/gouwu.jpg" alt="">
					<p class="G">高级IT人才的捷径</p>
				</div>
				<div class="two">
					<img src="images/match02.jpg" alt=""><br>
					<p>Java课程</p><br>
					<img src="images/gouwu.jpg" alt="">
					<p class="G">工程师必修课程</p>
				</div>
				<div class="three">
					<img src="images/match03.jpg" alt=""><br>
					<p>Python课程</p><br>
					<img src="images/gouwu.jpg" alt="">
					<p class="G">热门行业新趋势</p>
				</div>
				<div class="four">
					<img src="images/match04.jpg" alt=""><br>
					<p>UI设计课程</p><br>
					<img src="images/gouwu.jpg" alt="" width="46px">
					<p class="G">UI设计课程</p>
				</div>
               
			</div>

		</div>
		<img src="" alt="">
	</body>
</html>
